<template>
  <div v-if="showNotification" class="top-notification">
    <div class="notification-content">
      <div class="notification-left">
        <i class="icon-bell notification-icon"></i>
        <span class="notification-label">通知：</span>
        <div class="notification-text">
          <p>{{ bulletin }}</p>
        </div>
      </div>
      <button class="notification-close" @click="closeNotification">
        <el-icon><Close /></el-icon>
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { useStore } from 'vuex'

const store = useStore()
const bulletin = ref('')
const showNotification = ref(true)

// 关闭通知栏
const closeNotification = () => {
  showNotification.value = false
  // 将关闭状态保存到本地存储
  localStorage.setItem('notification-closed', 'true')
}

// 初始化通知栏数据
const initNotification = async () => {
  // 检查是否已经关闭过通知栏
  const isClosed = localStorage.getItem('notification-closed')
  if (isClosed === 'true') {
    showNotification.value = false
    return
  }

  try {
    // 优先从 store 获取网站信息
    if (!store.getters.isWebsiteLoaded) {
      await store.dispatch('fetchWebsite')
    }
    const websiteInfo = store.getters.websiteInfo
    if (websiteInfo) {
      bulletin.value = websiteInfo.bulletin
    }
  } catch (error) {
    console.warn('获取网站信息失败:', error)
    // 降级到本地存储
    try {
      const website = JSON.parse(sessionStorage.getItem('website') || '{}')
      bulletin.value = website.bulletin || ''
    } catch (storageError) {
      console.warn('获取本地存储数据失败:', storageError)
    }
  }

  // 如果没有公告内容，隐藏通知栏
  if (!bulletin.value || bulletin.value.trim() === '') {
    showNotification.value = false
  }
}

onMounted(() => {
  initNotification()
})
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.top-notification {
  position: relative;
  height: var(--notification-height);
  margin-bottom: 20px;
  margin-top: 10px;
  border-radius: var(--border-radius-md);
  background: var(--gradient-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
  animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.notification-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-2xl);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.notification-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.notification-icon {
  color: var(--notification-text);
  font-size: var(--font-size-md);
  animation: bell-shake 2s infinite;
  flex-shrink: 0;
}

@keyframes bell-shake {
  0%, 100% {
    transform: rotate(0);
  }
  20%, 60% {
    transform: rotate(10deg);
  }
  40%, 80% {
    transform: rotate(-10deg);
  }
}

.notification-label {
  color: var(--notification-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.notification-text {
  flex: 1;
  overflow: hidden;
  color: var(--notification-text);
}

.notification-text p {
  margin: 0;
  white-space: nowrap;
  animation: scrollNotification 15s linear infinite;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--notification-text);
}

@keyframes scrollNotification {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.notification-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  @include center-flex;
  cursor: pointer;
  color: var(--notification-text);
  transition: var(--transition-normal);
  flex-shrink: 0;
  outline: none;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
  }

  &:focus {
    outline: none;
  }

  .el-icon {
    font-size: var(--font-size-sm);
  }
}

// 响应式设计
@include respond-below(md) {
  .top-notification {
    margin: 5px;
  }

  .notification-content {
    padding: var(--space-xs) var(--space-md);
    gap: var(--space-sm);
  }

  .notification-icon,
  .notification-label,
  .notification-text p {
    font-size: var(--font-size-xs);
  }

  .notification-close {
    width: 24px;
    height: 24px;
  }
}

// 暗黑主题适配
[data-theme="dark"] .top-notification {
  background: var(--gradient-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
</style>
